<template>
    <div class="goods-list">
        <!--<router-link :to="'/home/goodsinfo/'+item.title" tag="div" class="goods-item" v-for="item in list" :key="item.sub1">
            <img :src="item.img" alt="">
            <h1>{{item.title}}</h1>
            <div class="info">
                <p class="price">
                    <span class="now">￥92</span>
                    <span class="old">￥109</span>
                </p>
                <p class="sell">
                    <span>热卖中</span>
                    <span>剩60件</span>
                </p>
            </div>
        </router-link>-->

       <!-- //1、使用a标签的形式，标签跳转
        //2、使用window.location.href,编程式导航-->
        <div class="goods-item" v-for="item in list" :key="item.sub1" @click="goDetail(item.title)">
            <img :src="item.img" alt="">
            <h1>{{item.title}}</h1>
            <div class="info">
                <p class="price">
                    <span class="now">￥92</span>
                    <span class="old">￥109</span>
                </p>
                <p class="sell">
                    <span>热卖中</span>
                    <span>剩60件</span>
                </p>
            </div>
        </div>


        <mt-button type="danger" size="large" @click="getMore">加载更多</mt-button>
    </div>
</template>

<script>
    export default {
        name: "goodslist",
        data(){
          return {
            id:242,
            list:[],
            index:0,

          }
        },
        methods:{
            getGoodsList(){
                this.$axios.get('/query?key=ee22a1e78b90506df4c51628ccfae9f6&rn=10&pn='+this.index+'&catalog_id='+this.id)
                    .then(res=>{
                        console.log(res)
                        this.list=res.data.result.data
                    })
            },
            getMore(){
                this.id++;
                if(this.id>258){
                    this.id=242
                    this.index=this.index+10;
                }

                this.$axios.get('/query?key=ee22a1e78b90506df4c51628ccfae9f6&rn=10&pn='+this.index+'&catalog_id='+this.id)
                    .then(res=>{
                        console.log(res)
                        this.list=this.list.concat(res.data.result.data)
                    })
            },
            goDetail(title){
                //使用js来实现路由导航
                //this.$route是路由参数对象，所以路由中的参数，params，query都属于它
                //this.$router是一个导航对象，可以用它使用js代码实现路由的前进后退，跳转到新的URL地址
                //传递字符串
                //this.$router.push("/home/goodsinfo/"+title)
                //传递对象
                //this.$router.push({path:"/home/goodsinfo/"+title})
                //命名的路由
                this.$router.push({name:"goodsinfo",params:{title}})

            }
        },
        created() {
            this.getGoodsList();
        }
    }
</script>

<style scoped>
    .goods-list{
        display: flex;
        flex-wrap: wrap;
        padding: 8px;
        justify-content: space-between;
    }
    .goods-item {
       width:49%;
        border:1px solid #ccc;
        box-shadow: 0 0 8px #ccc;
        margin: 3px 0;
        padding: 2px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height:292px;
    }
    .goods-item img {
        width: 100%;
    }
    .goods-item h1 {
        font-size:14px;
    }
    p {
        margin: 0;
        padding: 5px;
    }
    .info {
        background-color: #eee;
    }
    .info .price {

    }
    .info .price .now {
        color:red;
        font-size:16px;
        font-weight: bold;
    }
    .info .price .old {
        text-decoration: line-through;
        font-size:12px;
        margin-left: 10px ;
    }
    .info .sell {
        display: flex;
        justify-content: space-between;
        font-size:12px;
    }
</style>